<template>
  <van-row class="hu-name-grid">
    <van-col v-for="(item, i) in list" :key="i" :style="colStyle">
      <HuNameImg
        :name="item[props.label]"
        :portraitURL="item[props.portraitURL] || defaultImage"
        layout="vertical"
        imageWidth="32"
      />
    </van-col>
    <!-- 展开按钮 -->
    <van-col @click="onShow" :style="colStyle">
      <svg-icon :iconClass="icon" class="hu-name-grid--icon" />
    </van-col>
  </van-row>
</template>

<script>
import defaultImg from "@/img/defaultAvatar.jpg";
export default {
  name: "HuNameGrid",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    props: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value",
          portraitURL: "portraitURL",
        };
      },
    },
    // 默认头像
    defaultImage: {
      type: String,
      default: defaultImg,
    },
    // 最多排列n个
    max: {
      type: [Number, String],
      default: 5,
    },
    // 展开按钮图标
    icon: {
      type: String,
      default: "ellipsis",
    },
  },
  computed: {
    defaultProps() {
      return {
        label: "label",
        value: "value",
        portraitURL: "portraitURL",
        ...this.props,
      };
    },
    colStyle() {
      return { width: 100 / this.max + "%" };
    },
  },
  methods: {
    onShow() {
      this.$emit("show");
    },
  },
};
</script>

<style lang="less" scoped>
.hu-name-grid {
  .hu-name-grid--icon {
    font-size: 24px;
  }
}
</style>
